<template>
  <el-container>
    <el-header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>我的笔记</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <el-tooltip effect="dark" placeholder="right"
                  v-for="item in note"
                  :key="item.noteId">
        <p slot="content" style="font-size: 13px;margin-bottom: 6px">
          <span>论文标题:{{ item.title }}</span>
          <span>评论数量：{{item.commentNum}}</span>
        </p>
        <el-card shadow="hover" class="note">
          <p class="note-title">
            <el-link target="_blank" type="primary" @click="viewNote(item.paperId,item.noteId)">
              <span style="font-size:large">针对论文:{{ item.title }}的笔记</span>
            </el-link>
          </p>
          <p class="note-comment-num">评论数量：{{item.commentNum}}</p>
        </el-card>
      </el-tooltip>

      <el-empty v-if="note.length===0">
        <p>还没有笔记哦</p>
      </el-empty>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "MyNote",
  data(){
    return{
      note:[],
    }
  },
  methods:{
    getNote(){
      this.$axios.get('/note/getRecent').then(res=>{
        this.note=res.data.data
      }).catch(failRes=>console.log(failRes))
    },
    /*
     查看笔记
    */
    viewNote(paperId,noteId){
      this.$router.push({
        name:'Note',
        params:{
          paperId:paperId,
          noteId:noteId,
          editable:this.$store.state.authority>1
        }
      })
    }
  },
  mounted() {
    this.getNote()
  }

}
</script>

<style scoped>
.note-title{
  display: flex;
  right: 0;
}

.note-comment-num{
  display: flex;
  right:0;
}
</style>
